<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>rasterizeHTML.js example</title>
    <script type="text/javascript" src="../dist/rasterizeHTML.allinone.js"></script>
    <style>
        canvas, textarea {
            display: block;
            border: 1px solid gray;
            margin: 3px 0;
            box-sizing: border-box;
        }
        textarea, canvas {
            width: 600px;
            height: 250px;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

    <textarea id="input"></textarea>

    <script type="text/template" id="template">
        This rendering should look much sharper on retina displays than <span style='color: green'>the original example</span>.<br>
        In <span style="font-style: italic">Chrome</span> make sure to open the file through a webserver to load the embedded images.
        <div class="tigerbg">
            A div with background-image
        </div>
        An img: <img src="ghostscript_tiger_2x.png" style="width: 50px; height: 50px;" alt="Tiger"/>
        <style type="text/css">
            body {
                font-size: 16px;
            }
            .tigerbg {
                background: url(ghostscript_tiger_2x.png) top right no-repeat #eef;
                background-size: 50px; /* My Safari doesn't know about the new syntax of 'background' yet */
                height: 50px;
            }
        </style>
    </script>

    <script type="text/javascript">
        var input = document.getElementById("input"),
            canvas = document.getElementById("canvas"),
            template = document.getElementById("template"),
            oldText = input.value;

        var backingScale = function () {
            if (window.devicePixelRatio && window.devicePixelRatio > 1) {
                return window.devicePixelRatio;
            }
            return 1;
        };
        var parsePixelValue = function (value) {
            return parseInt(value, 10);
        };
        var scaleCanvasForRetina = function (canvas) {
            var scaleFactor = backingScale(),
                canvasStyle = window.getComputedStyle(canvas);

            canvas.width = parsePixelValue(canvasStyle.width) * scaleFactor;
            canvas.height = parsePixelValue(canvasStyle.height) * scaleFactor;
        };

        var drawHTML = function () {
            var scaleFactor = backingScale();

            rasterizeHTML.drawHTML(input.value, canvas, {
                zoom: scaleFactor
            });
        };

        scaleCanvasForRetina(canvas);
        input.onkeyup = function () {
            if (input.value !== oldText) {
                oldText = input.value;
                canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);

                drawHTML();
            }
        };

        if (!input.value) {
            input.value = template.innerHTML.replace(/^ {8}/gm, "").replace(/^\n/g, "").replace(/\n +$/g, "\n");
        }
        drawHTML();
    </script>
</body>
</html>
